<template>
	<view>
		<!--搜索 -->
		<ushop-search @click="gotoSearch"></ushop-search>
		
		
		<!-- 分类 -->
		<view class="cate-container">
			<!-- 左侧一级导航 -->
			<scroll-view scroll-y="true"  class="left-scroll" :style="{height:wh+'px'}">
				<view 
				:class="['item-left',i===active?'active-scroll-left':'']" 
				v-for="(item,i) in firstCateList" :key="i"
				@click="theActive(i)"
				>
				{{item.cat_name}}
				</view>
				
			</scroll-view>
			
			
			<!-- 左侧二级导航 -->
			<scroll-view scroll-y="true" class="right-scroll" :style="{height:wh+'px'}" :scroll-top="scrollTop">
				<view class="right-scroll-item" v-for="(item,i) in secondCateList" :key="i">
					<!-- 二级分标题 -->
					<view class="item-title">
						/{{item.cat_name}}/
					</view>
					
					<!-- 二级分类详请 -->
					<view class="item-detail">
						<!-- 图片和文字 -->
						<view 
						class="item-detail-children"
						v-for="(obj,index) in item.children" :key="index"
						@click="toGoodsList(obj)"
						>
							<image :src="obj.cat_icon" mode="widthFix"></image>
							<view class="detail-text">{{obj.cat_name}}</view>
						</view>
						
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wh:0 ,//页面状态
				active:0, //当前选中的一级分类的索引
				firstCateList:[] ,//一级分类数据
				secondCateList:[] ,// 二级分类数据
				scrollTop:10 
			};
		},
			
		onLoad(){
			//动态获取屏幕可用高度
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight - 50 //减去搜索组件的高度
			//
			this.getFirstCateList()
		},
			
		methods:{
				
			async getFirstCateList(){
				const{data:res} = await uni.$http.get('/categories')
				if(res.meta.status !==200) return uni.$showMsg()
				//设置页面数据
				this.firstCateList = res.message
				this.secondCateList = res.message[0].children
			},
			//一级分类事件处理函数
			theActive(i){
				//改变一级分类索引
				this.active =i
				//修改二级分类数据
				this.secondCateList=this.firstCateList[i].children
				//滚动到顶部 (动态设置定义好的顶部距离)
				this.scrollTop = Math.random() 
				// 0-0 无法实现回到顶部 所以写一个随机的数字 每次数据都不一样
				
			},
			//二级分类处理函数
				
			toGoodsList(goods){
				//点击之后会跳转到详请页
				uni.navigateTo({
					url:`/subPkg/goods_detail/goods_detail?cid=${goods.cat_id}`
				})
			},
			//触发自定义组件的事件处理函数	
			gotoSearch(e){
				// console.log(e)
				uni.navigateTo({
					url:'/subPkg/search/search'
				})
			}
		}   
	}
</script>

<style lang="scss">
	
.cate-container{
	display: flex;
		
	.left-scroll{
	
		width: 240rpx;
		height: 500rpx;
			
		.item-left{
			height: 120rpx;
			display: flex;
			font-size: 24rpx;
			justify-content: center;
			align-items: center;
				
			&.active-scroll-left{
				background-color: white;
				display: flex;
				justify-content: space-between;
				
				&::before{
					content: '';
					width: 4rpx;
					height: 60rpx;
					background-color: #c00000;
				}
				&::after{
					content: '';
					width: 4rpx;
					height: 60rpx;
					background-color: white;
				}
			}
		}
	}
	
		
	.right-scroll{
		background-color: white;	
		.right-scroll-item{
			
			.item-title{
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 700;
			}
			
				
			.item-detail{
				display: flex;
				flex-wrap: wrap;
				.item-detail-children{
					width: 33.33%;
					padding: 8rpx;
					box-sizing: border-box;
						
					image{
						width: 100%;
					}
						
					.detail-text{
						font-size: 24rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
}
</style>
